<template>
  <div>
    <h3>child</h3>

    <b class="child">{{msgs}}</b>
    <p>{{inputValue}}->最后一个字母：{{inputValueLast}},app-V:{{appVersion}}</p>
    <h1>{{appName}}</h1>
    <h1>{{userName}}</h1>
    <button @click="changeAppName">换数据</button>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
// const { mapState } = createNamespacedHelpers('user')
export default {
  props: {
    food: {
      type: String,
      default: '米'
    }
  },
  data() {
    return {
      msgs: '',
      inputValue: 'buscar'
    }
  },
  mounted() {
    this.$bus.$on('brother-click', msg => {
      this.msgs = msg
    })
  },
  computed: {
    // 方法1：
    ...mapState({
      appName: states => states.state.appName,
      userName: state => state.user.userName
    }),
    ...mapGetters({
      // appVersion: stateddd => stateddd.getters.appNameWithVersion

    }),
    // 方法2：
    // appName() {
    //   console.log(2122)
    //   console.log(this.$store)
    //   return this.$store.state.state.appName
    // },

    // userName() {
    //   return this.$store.state.user.userName
    // }
    inputValueLast() {
      return this.inputValue.substr(-1, 1)
    },
    appVersion() {
      console.log(11111)
      return (this.$store.getters.appNameWithVersion)
    }
  },
  methods: {
    changeAppName() {
      this.$store.commit('SET_APP_VERSION')
      this.$store.commit('SET_APPNAME', 'ddddd')
      // this.$store.commit(
      //   {
      //     type: 'SET_APPNAME',
      //     appName: 'ddddd'
      //   }
      // )
    }
  }
}

</script>
<style lang="less">
  .child{
    border: 2px dashed blue;
  }
</style>
